<template>
	<view class="tabbar-container">
		<block>
			<view class="tabbar-item" v-for="(item, index) in tabbarList" :key="index" :class="[item.centerItem ? ' center-item' : '']" @click="changeItem(item)">
				
				<view v-if="item.id == 2">
					<image class="image_view1" :src="currentItem == item.id ? item.selectIcon : item.icon"></image>
				</view>
				<view v-else :class="currentItem == item.id ?'item-top bck_sel':'item-top'" > 
					<image class="image-view" :src="currentItem == item.id ? item.selectIcon : item.icon"></image>
				</view>
				
				<view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
					<text>{{ item.text }}</text>
				</view>
			</view>
		</block>
	</view>
</template>
 
<script>
export default {
	props: {
		currentPage: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			currentItem: 0,
			
			tabbarList: [
				{
					id: 0,
					path: '/pages/index/index',
					icon: '/static/home/ico_1.png',
					selectIcon: '/static/home/ico_1h.png',
					text: '首页',
					centerItem: false
				},
				{
					id: 1,
					path: '/pages/recommend/index',
					icon: '/static/home/ico_2.png',
					selectIcon: '/static/home/ico_2h.png',
					text: '绵州商城',
					centerItem: false
				},
				{
					id: 2,
					// path: '/pages/productCate/productCateOne',
					icon: '/static/home/tab_center.png',
					selectIcon: '',
					text: '',
					centerItem: false
				},
				{
					id: 3,
					path: '/pages/cart/index',
					icon: '/static/home/ico_3.png',
					selectIcon: '/static/home/ico_3h.png',
					text: '购物车',
					centerItem: false
				},
				{
					id: 4,
					path: '/pages/mine/mine',
					icon: '/static/home/ico_4.png',
					selectIcon: '/static/home/ico_4h.png',
					text: '我的',
					centerItem: false
				}
			]
		};
	},
	mounted() {
		this.currentItem = this.currentPage;
		uni.hideTabBar();
	},
	methods: {
		changeItem(item) {
			let that = this;
			if(item.id == 2){
				// uni.navigateTo({
				// 	url:'/pages/productCate/productCateOne'
				// })
				// uni.showToast({
				// 	title:'扫一扫'
				// });
				
				uni.scanCode({
					success(res) {
						// console.log('扫描结果:', res.result);
						if(res.result.startsWith('https://demo.scmzhc.com/')||res.result.startsWith('https://ysmz.scmzhc.com/')){
							const params = that.parseQueryString(res.result)
							if('sid' in params && 'type' in params){
								setTimeout(() =>{
									uni.navigateTo({
										url:'/pages/scan/scan?url=' + encodeURIComponent(res.result)
									})
								},200);
							}else if('qcode' in params && 'sign' in params){
								setTimeout(() =>{
									uni.navigateTo({
										url:'/pages/scan/scan_recharge?url=' + encodeURIComponent(res.result)
									})
								},200);
							}else{
								console.log('非扫码支付')
							}
						}else{
							console.log('非扫码支付')
						}
						// const params = that.parseQueryString(res.result)
						
					},
					fail(err) {
						console.error('扫描失败:', err);
					}
				})
				
				
			}else{
				let _this = this;
				//_this.currentItem = item.id;
				uni.switchTab({
					url: item.path
				});
			}
			
			
			
		},
		parseQueryString(url) {
		  const query = {};
		  const urlParts = url.split('?');
		  
		  if (urlParts.length > 1) {
		    const queryString = urlParts[1];
		    const pairs = queryString.split('&');
		    
		    for (const pair of pairs) {
		      const [key, value] = pair.split('=');
		      query[decodeURIComponent(key)] = decodeURIComponent(value || '');
		    }
		  }
		  
		  return query;
		},
		
	}
};
</script>
<style scoped lang="scss">
.tabbar-container {
	position: fixed;
	bottom: 0rpx;
	left: 0;
	width: 100%;
	
/* 	box-shadow: 0 0 5px #999; */
	display: flex;
	align-items: center;

	padding-top: 20rpx;
	padding-bottom: 20rpx;
	color: #333333;
	
	z-index: 9999;
	
	background-color: #ffffff;
}
.tabbar-container .tabbar-item {
	width: 20%;
	height: 100rpx;
	display: flex;
	flex-direction: column;
	padding-bottom: 20rpx;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.tabbar-container .item-active {
	color: #3467f6;
}
.tabbar-container .center-item {
	display: block;
	position: relative;
	.bck_sel{
		
		background-color: #FCEBEC !important
	}
	
}
.center-item::after{
		content: '';
		display: block;
		background-color: #fff;
		width: 120rpx;
		height: 120rpx;
		position: absolute;
		top: -60rpx;
		left: calc(50% - 60rpx);
		z-index: 1;
		border-radius: 50%;
	}
.tabbar-container .tabbar-item .item-top {
	width: 70rpx;
	height: 70rpx;
	// padding: 10rpx;
	
}
.tabbar-container .center-item .item-top {
	flex-shrink: 0;
	width: 100rpx;
	height: 100rpx;
	position: absolute;
	top: -50rpx;
	left: calc(50% - 50rpx);
	border-radius: 50%;
	background-color: #f8f8f8;
	z-index: 10;
	/* box-shadow: 0 0 5px #999; */
	
	
}
// .center-item .item-top image {
// 	margin-top: 50%;
// 	transform: translateY(-50%);
// }
// .tabbar-container .tabbar-item .item-top image {
// 	width: 50rpx;
// 	height: 50rpx;
// }
.image_view1{
	margin-top: 50%;
	transform: translateY(-22%);
	width: 90rpx;
	height: 90rpx;
	// padding-right: 10rpx;
}
.image-view{
	margin-top: 50%;
	transform: translateY(-50%);
	width: 50rpx;
	height: 50rpx;
}
.tabbar-container .tabbar-item .item-bottom {
	font-size: 20rpx;
	width: 100%;
}
.tabbar-container .center-item .item-bottom {
	position: absolute;
	bottom: 5rpx;
}
</style>